<template>
    <el-card>
        <el-table :data="tableData" style="width: 100%; margin-bottom: 1.25rem" row-key="id" border>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="权限值" prop="code"></el-table-column>
            <el-table-column label="修改时间" prop="updateTime"></el-table-column>
            <el-table-column label="操作">
                <!-- row:即为已有的菜单对象|按钮的对象的数据 -->
                <template #="{ row }">
                    <el-button type="primary" @click="addPermisstion(row)" size="small"
                        :disabled="row.level == 4 ? true : false">{{ row.level == 3 ? '添加功能' : '添加菜单'
                        }}</el-button>
                    <el-button type="primary" @click="updatePermisstion(row)" size="small"
                        :disabled="row.level == 1 ? true : false">编辑</el-button>
                    <el-popconfirm :title="`你确定要删除${row.name}?`" width="16.25rem" @confirm="removeMenu(row.id)">
                        <template #reference>
                            <el-button type="primary" size="small" :disabled="row.level == 1 ? true : false">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 添加编辑菜单弹窗 -->

    <el-dialog @close="permissionFalse" v-model="dialogVisible" :title="formInfo.id ? '编辑菜单' : '添加菜单'" width="30%">
        <el-form ref="formRef" :model="formInfo" :rules="formRules" label-width="90px" status-icon>
            <el-form-item label="名称" prop="name">
                <el-input v-model="formInfo.name" />
            </el-form-item>
            <el-form-item label="权限" prop="code">
                <el-input v-model="formInfo.code" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="permissionFalse">取消</el-button>
                <el-button type="primary" @click="permissionTrue">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { permission, addOrUpdatePermission, removePermission } from '@/api/art/permission'
import type { Cdgl } from '@/api/art/permission/type'
import { ElMessage } from 'element-plus';
// 表格数据
const tableData = ref<Cdgl[]>([])
// 弹窗
const dialogVisible = ref<boolean>(false)
// 新增编辑请求参数
const formInfo = reactive<Cdgl>({
    level: 0,
    name: '',
    pid: 0,
    code: ''
})
// 表单实例
const formRef = ref()
onMounted(() => {
    getCdgl()
})
// 获取菜单管理
const getCdgl = async () => {
    const data = await permission()
    if (data.code == 200) {
        tableData.value = data.data
    }
}
// 验证规则
const formRules = {
    name: [{
        required: true, message: '请输入菜单名称', trigger: 'blur'
    }],
    code: [{
        required: true, message: '请输入权限值', trigger: 'blur'
    }]
}
// 添加菜单
const addPermisstion = (row: Cdgl) => {
    Object.assign(formInfo, {
        id: 0,
        level: 0,
        name: '',
        pid: 0,
        code: ''
    })
    formInfo.level = row.level + 1
    formInfo.pid = (row.id as number)
    dialogVisible.value = true
}
// 保存添加菜单更新
const permissionTrue = () => {
    formRef.value.validate(async (valid: boolean) => {
        if (!valid) return
        const data = await addOrUpdatePermission(formInfo)
        if (data.code == 200) {
            ElMessage.success(formInfo.id ? '编辑菜单成功' : '添加菜单成功')
            dialogVisible.value = false
            getCdgl()
        } else {
            ElMessage.success(formInfo.id ? '编辑菜单失败' : '添加菜单失败')
        }
    })
}
// 关闭取消新增编辑菜单弹窗
const permissionFalse = () => {
    Object.assign(formInfo, {
        id: 0,
        level: 0,
        name: '',
        pid: 0,
        code: ''
    })
    formRef.value.resetFields()
    dialogVisible.value = false
}
// 更新菜单
const updatePermisstion = (row: Cdgl) => {
    Object.assign(formInfo, row)
    dialogVisible.value = true
}
// 删除菜单
const removeMenu = async (id: number) => {
    const data = await removePermission(id)
    if (data.code == 200) {
        ElMessage.success("删除此菜单成功")
        getCdgl()
    } else {
        ElMessage.error('删除此菜单失败')
    }
}
</script>

<script lang="ts">
export default {
    name: 'Permission'
}
</script>

<style scoped ></style>